<script lang="ts" setup>
  import { useUserStore } from '@/store/modules/user'
  import { toLoginRoute } from '@/utils/routes'
  import { translate } from '@/i18n'
  import { VabRoute } from '/#/router'
  import { modifyPwd, addwxqrcode, getunlimitedqrcode } from '@/api/notice'

  const route: VabRoute = useRoute()
  const router = useRouter()

  const userStore = useUserStore()
  const { avatar, username, accountInfo, realname } = storeToRefs(userStore)
  const { logout } = userStore
  const validatePass = (rule: any, value: string, callback: any) => {
    console.log(value)
    if (value === '' || value !== data.value.password) {
      callback(new Error('输入的新密码不一致'))
    } else {
      callback()
    }
  }
  const active = ref(false)
  const dialogVisible = ref(false)
  const dialogVisible2 = ref(false)
  const wxappcodeImg = ref('')
  const data: any = ref({})
  const isNew = ref(true)
  const rulesform = reactive({
    oldPassword: [
      { required: true, trigger: 'blur', message: translate('请输入旧密码') },
    ],
    password: [
      { required: true, trigger: 'blur', message: translate('请输入新密码') },
    ],
    newpassword: [{ required: true, validator: validatePass, trigger: 'blur' }],
  })
  const formRef: any = ref(null)
  const confirm = async () => {
    await formRef.value.validate(async (valid: any) => {
      if (valid) {
        console.log(valid)
        if (data.value.newpassword === data.value.password) {
          const datas = await modifyPwd({
            oldPwd: data.value.oldPassword,
            newPwd: data.value.password,
          })
          ElMessage({
            message: datas.message,
            type: 'success',
          })
          dialogVisible.value = false
        } else {
          ElMessage({
            message: '新密码不一致，请重新输入',
            type: 'error',
          })
        }
      }
    })
  }
  const checkPassword = (password) => {
  // 定义正则表达式，包括数字、大小写字母和特殊字符
      const regExp = /^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])(?=.*[@$#!%*?&+])[a-zA-Z0-9@$#!%*?&+]{12,16}$/
      return regExp.test(password)
  }
  const blurFn = () => {
  console.log(checkPassword(data.value.password))
    if(checkPassword(data.value.password)){
       isNew.value = false
    }else{
      isNew.value = true
      ElMessage({
            message: '请输入的密码包括(12-16)位的数字、大小写字母和特殊字符',
            type: 'success',
      })
      return
    }
  }
  const wxappcode = async (params: any) => {
    params = {
      userid: accountInfo.value.userId,
    }
    const data = await addwxqrcode(params)
    if (data.code === '200') {
      console.log(data)
      wxappcodeimg(data)
    }
  }
  const wxappcodeimg = async (val) => {
    const params = {
      page: 'pages/index/index',
      scene: `a=${val.data.id}&b=1`,
      check_path: true,
      env_version: 'release',
    }
    const data = await getunlimitedqrcode(params)
    wxappcodeImg.value = data.data.buffer
    dialogVisible2.value = true
    console.log(data)
  }
  const handleVisibleChange = (val: boolean) => {
    active.value = val
  }
  const handleCommand = async (command: string) => {
    switch (command) {
      case 'logout':
        await logout()
        await router.push(toLoginRoute(route.fullPath))
        break
      case 'personalCenter':
        await router.push('/system/personalCenter')
        break
      case 'password':
        data.value = {}
        dialogVisible.value = true
        break
      case 'wxapp':
        await wxappcode()
        break
    }
  }
</script>

<template>
  <el-dropdown @command="handleCommand" @visible-change="handleVisibleChange">
    <span class="avatar-dropdown">
      <el-avatar class="user-avatar" :src="avatar" />
      <div class="user-name">
        <span class="hidden-xs-only color_b" :title="username">{{ realname }}</span>
        <span class="color_b">{{ '(' + username + ')' }}</span>
        <vab-icon
          class="vab-dropdown"
          :class="{ 'vab-dropdown-active': active }"
          icon="arrow-down-s-line"
        />
      </div>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="wxapp">
          <vab-icon icon="layout-grid-line" />
          <span>{{ translate('小程序') }}</span>
        </el-dropdown-item>
        <el-dropdown-item command="personalCenter">
          <vab-icon icon="user-line" />
          <span>{{ translate('个人中心') }}</span>
        </el-dropdown-item>
        <el-dropdown-item command="password">
          <vab-icon icon="edit-circle-line" />
          <span>{{ translate('修改密码') }}</span>
        </el-dropdown-item>
        <el-dropdown-item command="logout">
          <vab-icon icon="logout-circle-r-line" />
          <span>{{ translate('退出登录') }}</span>
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
  <el-dialog v-model="dialogVisible" title="修改密码" width="550">
    <el-form
      ref="formRef"
      label-position="left"
      label-width="100px"
      :model="data"
      :rules="rulesform"
    >
      <el-form-item :label="translate('旧密码')" prop="oldPassword">
        <el-input
          v-model="data.oldPassword"
          :placeholder="translate('请输入旧密码')"
          :show-password="true"
          style="width: 250px"
        />
      </el-form-item>
      <el-form-item :label="translate('新密码')" prop="password">
        <el-input
          v-model="data.password"
          :placeholder="translate('请输入新密码')"
          :show-password="true"
          style="width: 250px"
          @blur="blurFn"
        />
      </el-form-item>
      <el-form-item :label="translate('确认新密码')" prop="newpassword">
        <el-input
          v-model="data.newpassword"
          :placeholder="translate('请确认新密码')"
          :show-password="true"
          style="width: 250px"
          :disabled="isNew"
        />
        <div class="pdwInfo">注:密码最少12位,最多16位,至少包含1个大写字母1个小写字母.1个数字和1个特殊字符(!@#%^&"?+)</div>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">
          {{ translate('取消') }}
        </el-button>
        <el-button type="primary" @click="confirm">
          {{ translate('确定') }}
        </el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog v-model="dialogVisible2" title="小程序二维码" width="550">
    <div class="wxImg">
      <img :src="wxappcodeImg" />
    </div>
  </el-dialog>
</template>

<style lang="scss" scoped>
  .avatar-dropdown {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    justify-items: center;

    .user-avatar {
      flex-shrink: 0;
      width: 40px;
      height: 40px;
      margin-left: 15px;
      cursor: pointer;
      border-radius: 50%;
    }

    .user-name {
      position: relative;
      display: flex;
      flex-shrink: 0;
      align-content: center;
      align-items: center;
      height: 40px;
      margin-left: 6px;
      line-height: 40px;
      cursor: pointer;
      span {
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      [class*='ri-'] {
        margin-left: 3px !important;
      }
    }
  }
  .wxImg {
    text-align: center;
    img {
      width: 300px;
      height: 300px;
      margin: 0 auto;
    }
  }
  .pdwInfo {
    font-size: 12px;
    color: red;
    line-height: 20px;
    width: 260px;
    margin-top: 10px;
  }
  .color_b {
    color: #4e6ef2;
  }


  ::v-deep .el-dialog .el-dialog__header {
    border: none !important;
  }
</style>
